<template>
  <Modal
    width="800"
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    :title="title"
  >
    <div style="padding-bottom: 30px;">
      <div class="main-area" ref="scrollArea">
      <table class="table-area">
        <thead>
          <tr>
            <th>
              <div class="line-style" style="justify-content: center;min-width: 48px">序号</div>
            </th>
            <th>
              <div class="line-style">域名</div>
            </th>
            <th>
              <div class="line-style" >结果</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="lc-f" v-for="(item, index) in listShow" :key="item.domainName + index">
            <td>
              <div class="line-style" style="justify-content: center;">
                <span class="normal-f f-ell-sin" title="">{{ index + 1 + (page - 1) * pageSize }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f f-ell-sin" :title="item.domainName">{{
                  item.domainName
                }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="c-o f-wrap" style="font-size: 12px">{{ item.msg || item.reason }}</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="flx-row-e-c" style="margin-top: 10px;">
          <Page
            :total="listNum"
            :current="page"
            :page-size="pageSize"
            @on-change="pageChange"
            show-elevator
            show-total
          />
        </div>
      </div>
      <div class="flx-row-c-c" style="margin-top: 30px;">
        <div
          class="big-button-size user-strong-button"
          @click="cancel"
        >
          确定
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
export default {
  props: {
    title: '',
    show: {
      type: Boolean,
      default: false,
    },
    sucList: {
      default: () => []
    }
  },
  data() {
    return {
      pageSize: 10,
      page: 1,
    };
  },
  watch: {
    show: {
      handler(newValue) {
        if(newValue) {
          this.page = 1;
        }
      }
    }
  },
  methods: {
    cancel() {
      this.config = false;
    },
    // 切换页码
    pageChange(page) {
      this.$refs.scrollArea.scrollTop = 0;
      this.page = page;
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
    listShow() {
        if(this.sucList.length < this.page * this.pageSize) {
          if(this.page > 1 && this.sucList.length <= (this.page - 1) * this.pageSize) this.page = this.page - 1;
          return this.sucList.slice((this.page - 1) * this.pageSize)
        } else {
          return this.sucList.slice((this.page - 1) * this.pageSize , (this.page - 1) * this.pageSize + this.pageSize)
        }
    },
    listNum() {
        return this.sucList.length
    }
  },
};
</script>

<style lang="scss" scoped>
.main-area {
  padding: 15px 20px;
  max-height: 420px;
  overflow-y: auto;
}
</style>
